<template>
<div>
    <div class="first">
        <div class="cell1 f1"><font face="黑体" color="grey" size="5">浏览量 </font><i class="fa fa-eye fa-4x" aria-hidden="true"></i></br>
        <font face="黑体" color="white" size="7">235,234</font>   </div>
        <div class="cell1 f2"><font face="黑体" color="grey" size="5">订单量 </font><i class="fa fa-folder fa-4x" aria-hidden="true"></i></br>
        <font face="黑体" color="white" size="7">235,234</font>   </div>
        <div class="cell1 f3"><font face="黑体" color="grey" size="5">总金额 </font> <i class="fa fa-money fa-4x" aria-hidden="true"></i></br>
        <font face="黑体" color="white" size="7">¥235,234</font></div>
    </div>

    <div class="second">
        <div class="cell2 s1"><a class="s11"><span class="green"></span>待办事项</a>
            <i class="fa fa-table fa-3x"></i>
            <font class="s12" color="#8B1A1A">共有30条待处理订单</font>
            <font class="s13">商家产品重要的一步，就是为你的产品穿上花了的</br>外套（文案），好的产品秒速还可以促进你和客户</br>之间的关系，不仅可提高销售量，还可提高复购率 </font>
            <i class="fa fa-exchange fa-3x" aria-hidden="true"></i>
            <font class="s14" color="#8B1A1A">共有25条待换货订单</font>
            <font class="s15">商家产品重要的一步，就是为你的产品穿上花了的</br>外套（文案），好的产品秒速还可以促进你和客户</br>之间的关系，不仅可提高销售量，还可提高复购率 </font>
            <button type="button" class="s16">立即处理</button>
            <button type="button" class="s17">立即处理</button>

        </div>
        <div class="cell2 s2"><a class="s11"><span class="green"></span>商品零售量统计</a>
            <font class="s22">商品数量</font>
            <font class="s23">5,630</hr></font>
            <img src="./vue/image/goods001.jpg" class="s24"/>
            <img src="./vue/image/goods002.jpg" class="s25"/>
            <img src="./vue/image/goods003.jpg" class="s26"/>
            <font class="ss1 s24a">柠檬</font>
            <font class="s24b">¥4.50</font>
            <font class="ss1 s24c">安岳黄柠檬</font>
            <font class="ss2 s25a">葡萄</font>
            <font class="s25b">¥34.80</font>
            <font class="ss2 s25c">云南夏黑葡萄</font>
            <font class="ss3 s26a">草莓</font>
            <font class="s26b">¥45.80</font>
            <font class="ss3 s26c">奶油草莓</font>   
        </div>
    </div>
    <div class="third">
        <div class="cell3 t1">
            <a class="s11"><span class="green"></span>排名</a>
            <img src="./vue/image/rank.jpg" class="rank"/>
        </div>
            
        <div class="cell3 t2">
            <a class="s11"><span class="green"></span>水果统计环形图</a>
            <img src="./vue/image/yuan.jpg" class="yuan"/>
        </div>
    </div>
</div>    
</template>
<style>
        .first{
            display: flex;
            justify-content: space-between;
        }
        .cell1 {
            width: 350px;
            height: 125px;
            left: 70px;
            border-radius: 15px;
            text-align:center;
        }
        .f1{
            background-color: #e6f792;
           
        }
        .f2{
            background-color: #e6f792;
           
        }
        .f3{
            background-color: #e6f792;
           
        }
        
        .second{
            position: relative;
        }
        .cell2{
            height: 200px;
            border-radius: 15px;
            top: 10px;
            position: absolute;
            
        }
        .s1{
            background-color: #70e3cc;
            float: left;
            width: 700px;
            left: 10px;
        }
        .rank{
            width: 430px;
            height: 230px;
            left: 120px;
            top: 2px;
            position: absolute;
        }
        .s2{
            background-color: #70e3cc;
            float: right;
            width: 540px;
            left: 57%;
        }
        .yuan{
            width: 220px;
            height: 220px;
            left: 170px;
            top: 10px;
            position: absolute;

        }
        .third{
            position: relative;
        }
        .cell3{
            height: 225px;
            left: 70px;
            border-radius: 15px;
            top: 220px;
            position: absolute;
        }
        .t1{
            background-color: #f5f1f7;
            float: left;
            width: 700px;
            left: 10px;
        }
        .t2{
            background-color: #f5f1f7;
            float: right;
            width: 540px;
            left: 57%;
        }
        
        .green {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            background-color: green;
            animation-name: lig;
            animation-duration: 1s;
            animation-iteration-count: infinite;

        }
        .s11 {
            left: 15px;
            top: 10px;
            position: absolute;

        }
        @keyframes lig {
            0% {
                opacity: 0.1;
            }

            100% {
                opacity: 1;
            }
        }
        .fa-table{
            left: 25px;
            top: 45px;
            position: absolute;
        }
        .fa-exchange{
            left: 25px;
            top: 120px;
            position: absolute;
            
        }
        .s12{
            left: 100px;
            top: 15%;
            position: absolute;
        }
        .s13{
            left: 100px;
            top: 25%;
            position: absolute;
        }
        .s14{
            left: 100px;
            top: 55%;
            position: absolute;
        }
        .s15{
            left: 100px;
            top: 65%;
            position: absolute;
        }
        .s16{
            right: 10px;
            top: 25%;
            position: absolute;
        }
        .s17{
            right: 10px;
            top: 65%;
            position: absolute;
        }
        .s22{
            left: 15px;
            top: 15%;
            position: absolute;
        }
        .s23{
            right: 15px;
            top: 15%;
            position: absolute;
            color: gray;
        }
        .s24{
            width: 45px;
            height: 45px;
            left: 15px;
            top: 25%;
            position: absolute;
        }
        .s25{
            width: 45px;
            height: 45px;
            left: 15px;
            top: 45%;
            position: absolute;
        }
        .s26{
            width: 45px;
            height: 45px;
            left: 15px;
            top: 65%;
            position: absolute;
        }
        .ss1{
            left: 80px;
            position: absolute;
        }
        .s24a{
            top: 25%;
            height: 45px;
        }
        .s24b{
            right: 15px;
            top: 25%;
            position: absolute;
            
        }
        .s24c{
            top: 35%;
            height: 45px;
            color: gray;
        }

        .ss2{
            left: 80px;
            position: absolute;
        }
        .s25a{
            top: 45%;
            height: 45px;
        }
        .s25b{
            right: 15px;
            top: 45%;
            position: absolute;
        }
        .s25c{
            top: 55%;
            height: 45px;
            color: gray;
        }

        .ss3{
            left: 80px;
            position: absolute;
        }
        .s26a{
            top: 65%;
            height: 45px;
        }
        .s26b{
            right: 15px;
            top: 65%;
            position: absolute;
        }
        .s26c{
            top: 75%;
            height: 45px;
            color: gray;
        }
        .left{
            display: inline-block;
            top:0px;
            position: absolute;
            float:right;   
        }
        .head{
           width: 1225px;
           left:100px;
           top:0;
            float: right;
            position: absolute;
        }

</style>